<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章内容</title>
    <head>
        <style>
            body {
                font-family: 'Arial', sans-serif;
                background-color: #f4f4f4;
                color: #333;
                margin: 0;
                padding: 20px;
            }
            .container {
                max-width: 800px;
                margin: auto;
                background: #fff;
                padding: 20px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }
            .article-header, .comment-header {
                border-bottom: 1px solid #eee;
                padding-bottom: 10px;
                margin-bottom: 15px;
            }
            .article-title {
                font-size: 24px;
                margin: 0 0 10px 0;
            }
            .article-meta {
                font-size: 14px;
                color: #666;
            }
            .article-content {
                line-height: 1.6;
                margin-bottom: 20px;
            }
            .comment-form {
                margin-bottom: 20px;
            }
            .comment-input {
                width: 100%;
                padding: 10px;
                margin-bottom: 10px;
                border: 1px solid #ddd;
                box-sizing: border-box;
            }
            .comment-button {
                padding: 10px 15px;
                background-color: #5cb85c;
                color: white;
                border: none;
                cursor: pointer;
            }
            .comment-button:hover {
                background-color: #4cae4c;
            }
            .comments {
                margin-top: 20px;
            }
            .comment {
                background: #eee;
                padding: 10px;
                margin-bottom: 10px;
                border-left: 5px solid #333;
            }
        </style>
    </head>
    <body>
    
        <div class="container">
            <?php
            $id = @$_GET['id'];

            // 创建 mysql连接
            $con = @mysqli_connect("localhost","root","123456","news",3306);
            // 判断 mysql 连接
            if (mysqli_connect_errno()){
            die("连接MySQL失败:".mysqli_connect_errno()." 错误为:".mysqli_connect_error());
            }
            // 设置字符集
            mysqli_set_charset($con,"utf8");
            // 定义sql语句
            $sql = "SELECT news.id,news.title,news.content,news.buildtime,admin.name FROM news,admin WHERE news.aid = admin.id and news.id = $id";
            // 执行sql语句
            $result = mysqli_query($con,$sql);
            if(!$result){
            die("SQL语句失败:".mysqli_errno($con)." 错误为:".mysqli_error($con));
            }
            // 定义一个数组
            $result_list = [];
            // 遍历结果集
            while($row = mysqli_fetch_assoc($result )){
            array_push($result_list,$row);
            }
            // 释放 mysql连接
            mysqli_close($con);
                $title = $result_list[0]['title'];
                $content = $result_list[0]['content'];
                $buildtime = $result_list[0]['buildtime'];
                $name = $result_list[0]['name'];

                $html = " <!-- 文章内容 -->
                <div class='article-content'>
                    <div class='article-header'>
                        <h1 class='article-title'>$title</h1>
                        <div class='article-meta'>
                            <span>作者: $name</span>
                            <span> | </span>
                            <span>写入时间: $buildtime</span>
                            <span> | </span>
                            <span>ID: 001</span>
                        </div>
                    </div>
                    <p>$content</p>
                </div>";

            
            echo $html;
                
                        
            
            ?>

    
            <!-- 评论区 -->
            <div class="comments">
                <div class="comment-header">
                    <h2>评论区</h2>
                </div>
                <!-- 评论展示 -->
                <div class="comment">
                    <strong>评论者A:</strong> 这是我的评论内容。
                </div>
                <div class="comment">
                    <strong>评论者B:</strong> 我也要说点什么。
                </div>
                <div class="comment-form">
                    <input type="text" class="comment-input" placeholder="输入你的评论">
                    <button type="submit" class="comment-button">提交评论</button>
                </div>
            </div>
        </div>
    
    </body>
    </html>